<script lang="ts">
  export default {
    name: 'ExchangeRate',
  };
</script>
<script setup lang="ts">
  import { computed, ref, reactive, unref, onMounted, onUnmounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { showToast } from 'vant';
  import IMG_CNY from '@/assets/img/CNY.jpg'
  import IMG_USDT from '@/assets/img/USDT.jpg'
  import API_BANNER from '@/apis/banner';
  import dayjs from 'dayjs';

  let searchData = ref('')
  const route = useRoute();
  const router = useRouter();
  let searchVal = ref('')
  const isRotated = ref(true);
  const RateNum = ref(0)
  const updateTime = ref(0)
  const showPopover = ref(false)
  const rateList = ref([])
  const otherhRate = ref(0)
  const USDTrate = ref(0)

  let timer = ref(null)
  onMounted(() => {
    getRate()
    // 开启定时请求60S一次
    timer.value = setInterval(() => {
      initPage()
    }, 90000)
  })

  onUnmounted(() => {
    clearInterval(timer.value)
  })

  // 获取汇率
  const getRate = async () => {
    let res = await API_BANNER.indexExchangeRate()
    if (res.code == 1) {
      rateList.value = res.data
      changeDate[0].name = res.data[0].short_name
      changeDate[0].img = res.data[0].image
      RateNum.value = res.data[0].exchange_rate
      updateTime.value = dayjs(Number(res.time) * 1000).format('YYYY-MM-DD HH:mm:ss');
    }
  }


  let changeDate = reactive([
    {
      name: 'CNY',
      img: IMG_CNY
    },
    {
      name: 'USDT',
      img: IMG_USDT
    }
  ])
  const initPage = () => {
    changeDate[0] = {
      name: 'CNY',
      img: IMG_CNY
    }
    changeDate[1] = {
      name: 'USDT',
      img: IMG_USDT
    }
    otherhRate.value = 0
    USDTrate.value = 0
    getRate()
  }
  const rotateItem = () => {

    // 清空输入框
    otherhRate.value = 0
    USDTrate.value = 0
    isRotated.value = false
    // 数据进行对调
    let temp = reactive([])
    temp[0] = changeDate[1]
    temp[1] = changeDate[0]
    changeDate = temp

    setTimeout(() => {
      isRotated.value = true
    }, 600);
  }

  const showPopover1 = ref(false)
  // 阻止弹出
  const isShowPopover = (data, type) => {

    if (type) {
      if (data === 'USDT') {
        showPopover.value = false
      }
    } else {
      if (data === 'USDT') {
        showPopover1.value = false
      }
    }
  }
  // 选择得货币

  const chooseShort = (data, type) => {

    // 上
    if (type) {
      changeDate[0].name = data.short_name
      changeDate[0].img = data.image
      RateNum.value = data.exchange_rate
      showPopover.value = false
    } else {
      // 下
      changeDate[1].name = data.short_name
      changeDate[1].img = data.image
      RateNum.value = data.exchange_rate
      showPopover1.value = false
    }
    otherhRate.value = 0
    USDTrate.value = 0
  }
  // 输入框变化
  const fieldChange = (e) => {
    console.log(e, 'aa');
    if (changeDate[0].name === 'USDT') {
      USDTrate.value = (Number(otherhRate.value) * Number(RateNum.value)).toFixed(2)
    } else {
      USDTrate.value = (Number(otherhRate.value) / Number(RateNum.value)).toFixed(2)
    }
  }
</script>

<template>
  <div class="container">

    <h2 style="text-align: center;">{{$t('home.exchangeInquiry')}}</h2>
    <div class="main" style="height: 70vh;">
      <div class="swap">
        <transition enter-active-class="animated animate__slideInRight"
          leave-active-class="animated animate__slideOutLeft">
          <div class="top flex al-center jus-bet" v-if="isRotated">
            <div class="txt-cen" @click="isShowPopover(changeDate[0].name,1)">
              <div><img :src="changeDate[0].img" style="width: 40px;height: 40px;margin-bottom: 6px;" alt=""></div>
              <van-popover v-model:show="showPopover">
                <van-grid square clickable :border="false" column-num="1" style="width: 80px;">
                  <van-grid-item v-for="(i,index) in rateList" :key="index" :text="i.short_name" :icon="i.image"
                    @click="chooseShort(i,1)" />
                </van-grid>
                <template #reference>
                  <div class="fon">{{changeDate[0].name}}</div>
                </template>
              </van-popover>

            </div>
            <div>
              <van-field v-model="otherhRate" placeholder="0" input-align="right" @update:model-value="fieldChange"
                style="font-size: 52px;color: #a3a3a3;" />
            </div>
          </div>


        </transition>
        <br>
        <transition enter-active-class="animated animate__slideInLeft"
          leave-active-class="animated animate__slideOutRight">
          <div class="bottom  flex al-center jus-bet" v-if="isRotated">
            <div class="txt-cen" @click="isShowPopover(changeDate[1].name,0)">
              <div><img :src="changeDate[1].img" style="width: 40px;height: 40px;margin-bottom: 6px;" alt=""></div>
              <van-popover v-model:show="showPopover1">
                <van-grid square clickable :border="false" column-num="1" style="width: 80px;">
                  <van-grid-item v-for="(i,index) in rateList" :key="index" :text="i.short_name" :icon="i.image"
                    @click="chooseShort(i,0)" />
                </van-grid>
                <template #reference>
                  <div class="fon">{{changeDate[1].name}}</div>
                </template>
              </van-popover>
            </div>
            <div>
              <van-field v-model="USDTrate" placeholder="0" input-align="right" disabled
                style="font-size: 52px;color: #a3a3a3;" />
            </div>
          </div>
        </transition>

        <div class="imgSwap ">
          <transition enter-active-class="animated animate__pulse" leave-active-class="animated animate__rotateOut">
            <img v-if="isRotated" src="@/assets/img/jiaohuan.png" style="width: 62px;height: 50px;" alt=""
              @click="rotateItem">
          </transition>

        </div>

      </div>

      <p style="color: #ababac;margin: 10px 0 0 0;border-bottom: 1px dashed #ccc;padding: 6px 0;">
        {{$t('home.exchangeRate')}} ≈{{RateNum}}
      </p>
      <div style="font-size: 12px;color:#ababac ;margin-top: 6px;">{{$t('home.updateData')}}:{{updateTime}}</div>

    </div>
    <getBack></getBack>
  </div>
</template>

<style lang="less" scoped>
  .van-search__action {
    padding: 0;
  }

  .container {
    padding: 20px;
    background: url("@/assets/img/serice.jpg")no-repeat;
    background-size: 100% 100%;



    .main {
      .top {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;

      }

      .bottom {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
      }

      .fon {
        font-size: 22px;
        font-weight: 600;
        color: #555555;
      }

      .swap {
        position: relative;

        .imgSwap {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);

        }
      }
    }

  }
</style>